<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--    引入本地的vue.js文件-->
    <script src="../js/vue.js"></script>
</head>
<body>

<div id="app">
    <h2>age={{age}}</h2>
    <button @click="add(2)">+</button>
    <button @click="sub(3)">-</button>
</div>

<script>
    /*
    *   在methods中定义个函数可以含有参数列表 ,在函数调用时将对应的数据传入函数中进行使用
    *   数据代理
    *      vue实例在创建时 会将data配置项对应的对象代理在vm实例身上
    *      vm  age  info
    *      vm.age    -> getAge()    ->20
    *      vm.age = 30   -> setAge()  -> 30
    *
    *      User  user = new User()
    *      user.setName = "tom"
    *      user.setAge = 20
    *
    *      User user2 = user;
    *      user2.setAge = 30
    *
    *      user.getAge()  30
    *
    *
    *   在事件绑定的函数中使用this关键词 和使用 vm实例是一样的  函数中的this指向vm实例
    * */
    let vm = new Vue({
        el: '#app',
        data: {
            age: 20,
            info: "hello"
        },
        methods: {
            add(number) {

                // console.log(vm._data.info)
                // console.log(vm._data.age)
                //
                // console.log(vm.age);
                // console.log(vm.info);
                //
                // console.log(this.age)
                // console.log(this.info)

                this.age+=number
            },
            sub(number) {
                // console.log(vm)
                // console.log(this==vm)  //  true
                this.age-=number
            }
        }
    })
</script>

</body>
</html>